<?php echo $this->Html->css('/js/nestable/nestable.css'); ?>

<style>
    .dd-item {
        font-size: 12px;
    }
</style>

<header>
    <div class="row b-b m-l-none m-r-none bg-white-only">
        <div class="col-sm-4">
            <h3 class="m-t m-b-none">Groups</h3>
            <p class="block text-muted">Organise and manage members at a group level</p>
        </div>
        <div class="col-sm-8">
            <div class="m-t-lg pull-right">
                <div class="btn-group">
                    <button class="btn btn-sm btn-white" disabled=""><i class="fa fa-edit"></i> Edit</button>
                    <button class="btn btn-sm btn-white" disabled=""><i class="fa fa-trash-o"></i> Delete</button>
                </div>

                <div class="btn-group">
                    <button class="btn btn-sm btn-white" disabled=""><i class="fa fa-print"></i> Print</button>
                    <button class="btn btn-sm btn-white" disabled=""><i class="fa fa-cloud-download"></i> Export</button>
                </div>
            </div>
            <!-- MINI STATS - Review before deleting permanently
                <div class="clearfix m-t-lg m-b-sm pull-right pull-none-xs">
                    <div class="pull-left">                  
                        <div class="pull-left m-r-xs">
                            <span class="block">Users <span class="badge up bg-danger">+5</span></span>                    
                            <span class="h4">432k</span>
                            <i class="fa fa-level-up text-success"></i>
                        </div>
                        <div class="clear">
                            <div class="sparkline inline" data-type="bar" data-height="35" data-bar-width="4" data-bar-spacing="2" data-stacked-bar-color="['#afcf6f', '#eee']">5:5,8:4,12:5,10:6,11:7,12:2,8:6</div>
                        </div>
                    </div>
                    <div class="pull-left m-l-lg">
                        <div class="pull-left m-r-xs">
                            <span class="block">Profit</span>                    
                            <span class="h4">$4k</span>
                            <i class="fa fa-level-down text-danger"></i>
                        </div>
                        <div class="clear">
                            <div class="sparkline inline" data-type="bar" data-height="35" data-bar-width="4" data-bar-spacing="2" data-bar-color="#fb6b5b">6,5,8,9,6,3,5</div>
                        </div>
                    </div>
                </div>-->
        </div>
    </div>

</header> 
<section  class="hbox stretch">
    <aside class="aside-lg bg-light lter b-r">
        <section class="vbox">
            <section class="scrollable">
                <div class="wrapper">
                    <p>Expand the list of groups below to see the subgroups and manage all members in each group.</p>

                    <div class="dd" id="groups-list">
                        <?php foreach ($categories as $category) { ?>
                            <ol class="dd-list">
                                <li class="dd-item" data-id="<?php echo $category['OrganisationGroupType']['id']; ?>">
                                    <div class="dd-handle" >
                                        <?php echo $category['OrganisationGroupType']['name']; ?>
                                    </div>

                                    <ol class="dd-list">
                                        <?php foreach ($category['OrganisationGroup'] as $group) { ?>
                                            <li class="dd-item" data-id="<?php echo $group['id']; ?>">
                                                <div class="dd-handle group-name">
                                                    <a href="<?php echo $this->Html->url(array('action' => 'group')); ?>">
                                                        <?php echo $group['name']; ?>
                                                    </a>
                                                </div>
                                            </li>
                                        <?php } ?>
                                    </ol>
                                </li>
                            </ol>

                        <?php } ?>
                    </div>
                </div>
            </section>
        </section>
    </aside>

    <aside class="bg-white-only">
        <div class="wrapper">
            <div class="row">
                <div class="col-lg-12">
                    <div class="" id="table_panel">
                        
                    </div>
                </div>
            </div>
        </div>
    </aside>

</section>

<input type="hidden" id="group_table_url" value="<?php echo $this->Html->url(array('controller' => 'groups', 'action' => 'groups_table')); ?>" />
<input type="hidden" id="birthdays-data-url" value="<?php echo $this->Html->url(array('controller' => 'organisation', 'action' => 'birthdays')); ?>" />

<?php
echo $this->Html->script('charts/flot/jquery.flot.min.js');
echo $this->Html->script('charts/flot/jquery.flot.tooltip.min.js');
echo $this->Html->script('charts/flot/jquery.flot.resize.js');
echo $this->Html->script('charts/flot/jquery.flot.orderBars.js');
echo $this->Html->script('charts/flot/jquery.flot.pie.min.js');
echo $this->Html->script('charts/flot/jquery.flot.time.js');

echo $this->Html->script('nestable/jquery.nestable.js');
?>

<script>
    $( document ).ready( function() {

        // activate Nestable for list 1
        /*$( '#groups-list' ).nestable( {
            group: 1
        });

        $( '.dd' ).nestable( 'collapseAll' );*/

        $(".group-name").click(function(e) {
            e.preventDefault();
            var group_id = $(this).parents('.dd-item').data('id');
            loadTable(group_id);
        });

        function loadTable(group_id) {
            var url = $("#group_table_url").val();
            var params = {
                group_id: group_id
            };
            
            $.ajax({
                url: url,
                data: params,
                type: 'post',
                success: function(response) {
                    $("#table_panel").html(response);
                },
                error: function(xhr) {
                    console.log(xhr.responseText)
                }
            });
        }
    });
</script>
